<template>
    <div class="maparea">
        <div id="aamap"></div>
    </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import chengdujson from "@/config/chengdu.json"
import mapBg from "@/assets/images/71693535066_.pic.jpg"
import mapBg_2 from "@/assets/images/81693535067_.pic.jpg"

echarts.registerMap('chengdu', {
    geoJson: chengdujson,
    backgroundImage: mapBg
})

// let Gydata = [
//     {
//         name: count.RECORDS[5].district,
//         coord: [105.86942, 32.10962],
//         num: Number(count.RECORDS[5].qualified) + Number(count.RECORDS[5].unqualified) + '家',
//         shop: count.RECORDS[5].qualified + count.RECORDS[5].unqualified,
//         type: '家',
//         compliance: count.RECORDS[5].qualified,
//         unCompliance: count.RECORDS[5].unqualified,
//         passRate: Math.round(count.RECORDS[5].qualified / (Number(count.RECORDS[5].qualified) + Number(count.RECORDS[5].unqualified)) * 10000) / 100.00 + "%"
//     },
//     {
//         name: count.RECORDS[6].district,
//         coord: [105.92873, 32.60398],
//         num: Number(count.RECORDS[6].qualified) + Number(count.RECORDS[6].unqualified) + '家',
//         shop: count.RECORDS[6].qualified + count.RECORDS[6].unqualified,
//         type: '家',
//         compliance: count.RECORDS[6].qualified,
//         unCompliance: count.RECORDS[6].unqualified,
//         passRate: Math.round(count.RECORDS[6].qualified / (Number(count.RECORDS[6].qualified) + Number(count.RECORDS[6].unqualified)) * 10000) / 100.00 + "%"

//     },
//     {
//         name: count.RECORDS[0].district,
//         coord: [106.10148, 31.84962],
//         num: Number(count.RECORDS[0].qualified) + Number(count.RECORDS[0].unqualified) + '家',
//         shop: count.RECORDS[0].qualified + count.RECORDS[0].unqualified,
//         type: '家',
//         compliance: count.RECORDS[0].qualified,
//         unCompliance: count.RECORDS[0].unqualified,
//         passRate: Math.round(count.RECORDS[0].qualified / (Number(count.RECORDS[0].qualified) + Number(count.RECORDS[0].unqualified)) * 10000) / 100.00 + "%"

//     },
//     {
//         name: count.RECORDS[2].district,
//         coord: [105.49942, 31.84962],
//         num: Number(count.RECORDS[2].qualified) + Number(count.RECORDS[2].unqualified) + '家',
//         shop: count.RECORDS[2].qualified + count.RECORDS[2].unqualified,
//         type: '家',
//         compliance: count.RECORDS[2].qualified,
//         unCompliance: count.RECORDS[2].unqualified,
//         passRate: Math.round(count.RECORDS[2].qualified / (Number(count.RECORDS[2].qualified) + Number(count.RECORDS[2].unqualified)) * 10000) / 100.00 + "%"
//     },
//     {
//         name: count.RECORDS[3].district,
//         coord: [105.14541, 32.45162],
//         num: Number(count.RECORDS[3].qualified) + Number(count.RECORDS[3].unqualified) + '家',
//         shop: count.RECORDS[3].qualified + count.RECORDS[3].unqualified,
//         type: '家',
//         compliance: count.RECORDS[3].qualified,
//         unCompliance: count.RECORDS[3].unqualified,
//         passRate: Math.round(count.RECORDS[3].qualified / (Number(count.RECORDS[3].qualified) + Number(count.RECORDS[3].unqualified)) * 10000) / 100.00 + "%"

//     },
//     {
//         name: count.RECORDS[1].district,
//         coord: [106.39649, 32.30510],
//         num: Number(count.RECORDS[1].qualified) + Number(count.RECORDS[1].unqualified) + '家',
//         shop: count.RECORDS[1].qualified + count.RECORDS[1].unqualified,
//         type: '家',
//         compliance: count.RECORDS[1].qualified,
//         unCompliance: count.RECORDS[1].unqualified,
//         passRate: Math.round(count.RECORDS[1].qualified / (Number(count.RECORDS[1].qualified) + Number(count.RECORDS[1].unqualified)) * 10000) / 100.00 + "%"
//     },
//     {
//         //利州区里面需加上经开区的数据
//         name: count.RECORDS[4].district,
//         coord: [105.80207, 32.38996],
//         num: Number(count.RECORDS[4].qualified) + Number(count.RECORDS[4].unqualified) + Number(count.RECORDS[7].qualified) + Number(count.RECORDS[7].unqualified) + '家',
//         shop: (Number(count.RECORDS[4].qualified) + Number(count.RECORDS[4].unqualified)) + Number((count.RECORDS[7].qualified) + Number(count.RECORDS[7].unqualified)),
//         type: '家',
//         compliance: Number(count.RECORDS[4].qualified) + Number(count.RECORDS[7].qualified),
//         unCompliance: Number(count.RECORDS[4].unqualified) + Number(count.RECORDS[7].unqualified),
//         passRate: Math.round((Number(count.RECORDS[4].qualified) + Number(count.RECORDS[7].qualified)) / (Number(count.RECORDS[4].qualified) + Number(count.RECORDS[4].unqualified) + Number(count.RECORDS[7].qualified) + Number(count.RECORDS[7].unqualified)) * 10000) / 100.00 + "%"
//     }
// ]

onMounted(() => {
    var myChart = echarts.init(document.getElementById('aamap'));
    myChart.setOption({
        tooltip: {
            className: 'tooltipBox',
            triggerOn: 'click',
            enterable: true,
            trigger: 'item',
            formatter: function (val:any) {
                // let newVal = JSON.stringify(val).replace(/"\"/g,"'")
                if (val.componentType == 'series') {
                    return
                }
                return `
                <div class="gymap">
                        <p style="height: 30px;font-size: 17px; color: #fff;text-align:left;padding:4px 0 0 10px;margin: 25px 22px 0; border-bottom: 1px solid #0092BC;">  ${val.data.name} </p>
                        <p style="margin-left: 10px;font-size: 14px; color: #CCEFF0;padding: 0 25px;">综合主体<span style="color: #FF9000;font-size: 14px;margin-left: 8px;">${val.data.num}</span></p>
                        <ul style="margin-left:10px;font-size: 14px; color: #CCEFF0;padding: 0 25px;">  
                        <li style="margin-left:18px;">
                            主体信用度达标<span style="color:#00EAFF;margin-left: 8px;" >${val.data.compliance}  </span>
                        </li>    
                        <li  style="margin-left: 18px;">
                            主体信用度不达标 <span style="color:#00EAFF;margin-left: 8px;"> ${val.data.unCompliance}</span>
                        </li>    
                        <li  style="margin-left: 18px;">
                            信用度达标率<span style="color:#EADF46;margin-left: 8px;">${val.data.passRate} </span>
                        </li>    
                        </ul>
                        <div class='line-left'  style='width:200px;height:50px;position:fixed;top:-88px;left:150px'>
                            <img src=${lineLeft} alt=''></div>
                        </div>`

            },
            position: function (pos, params, dom, rect, size) {
                return [pos[0] - 480, pos[1] + 80]
            },
            // extraCssText: `background: url(${popup}) no-repeat;background-size: 100% 100%; width: 292px; height: 213px;border: none;box-shadow: none;`

        },
        geo: {
            map: 'chengdu',
            type: 'map',
            layoutCenter: ['51%', '42%'],
            layoutSize: '100%',
            boxDepth: 110, //地图倾斜度
            zoom: 1,
            silent: true, //是否禁用所有交互效果
            roam: false,
            selectedMode: 'false',
            aspectScale: 0.85,
            itemStyle: {
                color: "#00333d", // 背景
                opacity: 1, //透明度
                borderWidth: 1, // 边框宽度
                borderColor: '#00afd8',// 边框颜色
            },
            emphasis: {
                itemStyle: {
                    color: "#00333d", // 背景
                    opacity: 1, //透明度
                    borderWidth: 1, // 边框宽度
                    borderColor: '#00afd8',// 边框颜色
                },
            }
        },
        series: [{
            type: 'map',
            map: 'chengdu',
            layoutCenter: ["50%", "40%"],
            layoutSize: "100%",
            zoom: 1,
            show: true,
            roam: false,//是否开启鼠标缩放和平移漫游
            // geoIndex: 0,// 不可缺少，否则无tooltip 指示效果
            markPoint: {     //标记点
                symbol: ``,
                animation: false,
                symbolSize: [0, 0],
                // data: Gydata,
            },
            aspectScale: 0.85,
            label: {
                normal: {
                    show: true,//显示省份标签
                    textStyle: { color: "#fff" }//省份标签字体颜色
                },
                emphasis: {//对应的鼠标悬浮效果
                    show: true,
                    textStyle: { color: "#323232" },
                }
            },
            itemStyle: {
                normal: {
                    borderWidth: 2,//区域边框宽度
                    borderColor: '#42FFFD',//区域边框颜色 #1AEBFD
                    boxShadow: '0px 0px 22px 0px #1CCBF1',
                    areaColor: {
                        image: mapBg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                        repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
                    }
                },
                emphasis: {
                    borderWidth: 1,//鼠标滑过区域，区域边框宽度
                    borderColor: '#fff',//鼠标滑过区域，区域边框颜色
                    areaColor: {
                        image: mapBg_2, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                        // import mapBg_2 from '../../../assets/img/bigscreen/mapBg_2.png'
                        // image: mapBg_2 || document.createElement("img"),
                        repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
                    },

                }
            },
            // data: [
            //     {
            //         name: count.RECORDS[5].district,
            //         shop: count.RECORDS[5].qualified + count.RECORDS[5].unqualified,
            //         num: Number(count.RECORDS[5].qualified) + Number(count.RECORDS[5].unqualified) + '家',
            //         type: '家',
            //         compliance: count.RECORDS[5].qualified,
            //         unCompliance: count.RECORDS[5].unqualified,
            //         passRate: Math.round(count.RECORDS[5].qualified / (count.RECORDS[5].qualified + count.RECORDS[5].unqualified) * 10000) / 100.00 + "%"
            //     },
            //     {
            //         name: count.RECORDS[6].district,
            //         shop: count.RECORDS[6].qualified + count.RECORDS[6].unqualified,
            //         num: Number(count.RECORDS[6].qualified) + Number(count.RECORDS[6].unqualified) + '家',
            //         type: '家',
            //         compliance: count.RECORDS[6].qualified,
            //         unCompliance: count.RECORDS[6].unqualified,
            //         passRate: Math.round(count.RECORDS[6].qualified / (count.RECORDS[6].qualified + count.RECORDS[6].unqualified) * 10000) / 100.00 + "%"
            //     },
            //     {
            //         name: count.RECORDS[0].district,
            //         shop: count.RECORDS[0].qualified + count.RECORDS[0].unqualified,
            //         num: Number(count.RECORDS[0].qualified) + Number(count.RECORDS[0].unqualified) + '家',
            //         type: '家',
            //         compliance: count.RECORDS[0].qualified,
            //         unCompliance: count.RECORDS[0].unqualified,
            //         passRate: Math.round(count.RECORDS[0].qualified / (count.RECORDS[0].qualified + count.RECORDS[0].unqualified) * 10000) / 100.00 + "%"
            //     },


            //     {
            //         name: count.RECORDS[2].district,
            //         shop: count.RECORDS[2].qualified + count.RECORDS[2].unqualified,
            //         num: Number(count.RECORDS[2].qualified) + Number(count.RECORDS[2].unqualified) + '家',
            //         type: '家',
            //         compliance: count.RECORDS[2].qualified,
            //         unCompliance: count.RECORDS[2].unqualified,
            //         passRate: Math.round(count.RECORDS[2].qualified / (count.RECORDS[2].qualified + count.RECORDS[2].unqualified) * 10000) / 100.00 + "%"
            //     },
            //     {
            //         name: count.RECORDS[3].district,
            //         shop: count.RECORDS[3].qualified + count.RECORDS[3].unqualified,
            //         num: Number(count.RECORDS[3].qualified) + Number(count.RECORDS[3].unqualified) + '家',
            //         type: '家',
            //         compliance: count.RECORDS[3].qualified,
            //         unCompliance: count.RECORDS[3].unqualified,
            //         passRate: Math.round(count.RECORDS[3].qualified / (count.RECORDS[3].qualified + count.RECORDS[3].unqualified) * 10000) / 100.00 + "%"
            //     },
            //     {
            //         name: count.RECORDS[1].district,
            //         shop: count.RECORDS[1].qualified + count.RECORDS[1].unqualified,
            //         num: Number(count.RECORDS[1].qualified) + Number(count.RECORDS[1].unqualified) + '家',
            //         type: '家',
            //         compliance: count.RECORDS[1].qualified,
            //         unCompliance: count.RECORDS[1].unqualified,
            //         passRate: Math.round(count.RECORDS[1].qualified / (count.RECORDS[1].qualified + count.RECORDS[1].unqualified) * 10000) / 100.00 + "%"
            //     },
            //     {
            //         name: count.RECORDS[4].district,
            //         shop: count.RECORDS[4].qualified + count.RECORDS[4].unqualified,
            //         num: Number(count.RECORDS[4].qualified) + Number(count.RECORDS[4].unqualified) + '家',
            //         type: '家',
            //         compliance: count.RECORDS[4].qualified,
            //         unCompliance: count.RECORDS[4].unqualified,
            //         passRate: Math.round(count.RECORDS[4].qualified / (count.RECORDS[4].qualified + count.RECORDS[4].unqualified) * 10000) / 100.00 + "%"
            //     },
            // ]
        }
        ],
    });
})
</script>

<style lang="scss" scoped>
.maparea {
    width: 100%;
    height: 100%;
    position: relative;
}

#aamap {
    width: 100%;
    height: 110%;
    background-size: 100% 110%;


    div {
        pointer-events: none;
    }

    // background-size: contain;


    .gymap {
        width: 292px;
        height: 213px;
        background: url('../../../assets/img/bigscreen/popup.png') 100% 100% no-repeat;
        // background-size: contain;
        padding: 8px;
        box-sizing: border-box;
        position: relative;

        .line-left {
            width: 200px;
            height: 50px;
            display: block;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;



        }

        li {
            position: relative;
            padding: 10px 20px;
        }

        &_top {
            height: 50px;
            width: 100%;
        }



        .main {
            // height: calc(100% - 50px);
            height: 160px;

            .item {
                margin-left: 20px;

                span {
                    color: #00EAFF;
                }
            }
        }

    }

    .tooltipBox {
        width: 200px !important;
        height: 200px !important;
        background-color: orange !important;
    }
}

.typebtn {
    position: absolute;
    bottom: 30px;
    right: 20px;

    .btnItem {
        width: 170px;
        height: 32px;
        background: url('../../../assets/img/bigscreen/mapbtn-bg.png') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 32px;
        margin-bottom: 10px;
        font-size: 14px;
        font-style: italic;
        color: #73FDFF;

    }

    .choosed {
        width: 170px;
        height: 32px;
        background: url('../../../assets/img/bigscreen/mapbtn-bg1.png') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 32px;
        margin-bottom: 10px;
        font-size: 14px;
        font-style: italic;
        color: #FFFFFF;

    }
}
</style>